<template>
  <div class="lyric">
    <el-dialog
      title="歌词页面"
      :visible.sync="dialogVisible"
      width="30%"
      :fullscreen="true"
      :modal="false"
    >
      <div class="main">
        <div class="left">
          <img :src="img" alt="">
          <div class="name">
            {{ songName }}
          </div>
          <div class="author">
            {{ author }}
          </div>
        </div>
        <div ref="wrapper" class="list-wrapper">
          <div class="list-content" :style="{transform: `translateY(-${lyricIndex*24}px)`}">
            <ul>
              <li>{{ songName }}</li>
            </ul>
            <ul v-for="(item,index) in list" :key="index">
              <li :class="{headred:songTime>0&&songTime>item[0]&&index+1==lyricIndex?true:false}">
                <!-- <span>{{ index }}</span> -->
                <!-- <span>{{ item.__ob__.dep.id }}</span> -->
                {{ item[1] }}
              </li>
            </ul>
            <!-- <ul ref="w" /> -->
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { SongLyricAPI } from '@/api/AudioPlayer.js'
import { parseLyric } from '@/utils'
import BScroll from 'better-scroll'
export default {
  // props: ['songTime'],
  props: {
    songTime: {
      type: Number,
      required: true,
      default: 0
    },
    songName: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      author: '',
      img: '',
      dialogVisible: false,
      list: [],
      text: '',
      head: false, // 是否高亮
      lyricIndex: 0, // 歌词活跃
      options: {
        scrollY: true,
        tagException: {
          className: /(^|\s)tlist-content(\s|$)/
        },
        probeType: 0,
        momentum: false
      }
    }
  },
  watch: {
    songTime(newName, oldName) {
      // console.log(newName)
      // console.log(oldName)
      // this.list.forEach(item => {
      //   console.log(item[0])
      // })
      // console.log(Math.round(newName))
      // console.log(Math.round(this.list.forEach(item => {
      //   return item[0]
      // })))
      this.list.forEach(item => {
        if (Math.ceil(item[0]) === Math.ceil(newName)) {
          this.lyricIndex += 1
        }
      })
    }
  },
  created() {
    // this.fn()
  },
  methods: {
    getlist(txt) {
      this.list = parseLyric(txt)
      // console.log(this.list)
      // console.log(this.list2)
    },
    fn(id) {
    // console.log(parseLyric(this.text))
      SongLyricAPI(id).then((res) => {
        this.text = res.data.lrc.lyric
        // console.log(this.text)
        this.getlist(this.text)
        this.$nextTick(() => {
          this.scroll = new BScroll(this.$refs.wrapper, this.options)
          // console.log(this.$refs.wrapper)
          // console.log(this.scroll)
          // console.log(this.scroll.scrollToElement())
          // scrollToElement(el, time, offsetX, offsetY, easing)
          // this.scroll.scrollToElement(this.$refs.w, 138000, 0, -1400)
        })
      }).catch(error => {
        console.log(error)
      })
      this.img = localStorage.getItem('image')
      this.author = localStorage.getItem('author')
    }
  }
}
</script>

<style lang="less" scoped>
 li {
  list-style: none;
}
ul {
  list-style: none;
}
/deep/ .el-dialog {
    background-color: #222 !important
}
.main {
  display: flex;
  text-align: center;
  .left {
    flex: 1;
    margin-top: 60px;
    img {
      border-radius: 0.75em;
      width: 54vh;
      height: 54vh;
    }
    .name {
      font-size: 1.4rem;
      color: #fff;
      text-align: left;
      padding-left: 38px;
    }
    .author {
      font-size: 1rem;
       color: #7a7a7b;
      text-align: left;
      padding-left: 38px;
    }
  }
  .list-wrapper {
    flex: 1;
    height: 600px;
    overflow: hidden;
  }
}
.headred {
  color: skyblue;
}
.list-content{
  transition-duration: 1s;
}
</style>>

